<template>

  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="交班时间" prop="tablenumberId">
        <el-date-picker
          style="width: 400px"
          v-model="form.date"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="员工姓名" prop="staffName" >
        <el-input
          v-model="queryParams.staffName"
          placeholder="请输入会员员工姓名"
          clearable
          size="small"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="initWorkRecord">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="bgf">
      <el-table :data="getWorkRecordData" class="tables">
        <el-table-column label="交班员工" prop="staffName">
        </el-table-column>
        <el-table-column label="上班时间" prop="sbTime" width="160">
        </el-table-column>
        <el-table-column label="下班时间" prop="xbTime" width="160">
        </el-table-column>
        <!--  <el-table-column label="交班id" prop="id">
          </el-table-column>-->
        <el-table-column label="初始金额" prop="initMoney" >
        </el-table-column>
        <el-table-column label="现金收入" prop="cashMoney" >
        </el-table-column>
        <el-table-column label="扫码金额" prop="scanMoney" >
        </el-table-column>
        <el-table-column label="其他收入" prop="otherMoney" >
        </el-table-column>
        <el-table-column label="支出金额" prop="outMoney" >
        </el-table-column>
        <el-table-column label="退款" prop="refendMoney" >
        </el-table-column>
<!--        <el-table-column label="取款金额" prop="sendMoney" >-->
<!--        </el-table-column>-->

        <el-table-column label="总金额" prop="allMoney"  >
        </el-table-column>
        <el-table-column label="交班金额" prop="ylMoney" >
        </el-table-column>

      </el-table>
       <pagination
         v-show="total>0"
         :total="total"
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
         @pagination="initWorkRecord"
       />

    </div>

  </div>
</template>
<script>
  import {Integral} from "@/api/mahjong/integral";
  import {getMoneyInfo,setInitMOney,goXiaBan,getWorkRecord,getDetailInfo} from "@/api/mahjong/record";

  export default {
    name: "Druid",
    data() {
      return {
        tab: ['员工交班', '交班查询'],
        idx: 0,
        form: {
          date: ''
        },
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        visible: false,
        incomeVisible: false,
        handoverVisible: false,
        goWorkTanKuang: false,
        goXiaBanTanKuang: false,
        integralList:[],
        getWorkRecordData:[],
        initMoney:0,
        deliverMoney:0,
        remainingMoney:0,
        tableData: [{
          date: '2099-09-09  09:00:14',
          money: '966',
          yuangong: 'user123456'
        }, {
          date: '2099-09-09  09:00:14',
          money: '966',
          yuangong: 'user123456'
        }, {
          date: '2099-09-09  09:00:14',
          money: '966',
          yuangong: 'user123456'
        }, {
          date: '2099-09-09  09:00:14',
          money: '966',
          yuangong: 'user123456'
        }],
        tableData1: [{
          name: '香烟',
          num: '5',
          money: '966'

        }, {
          name: '香烟',
          num: '5',
          money: '966'
        }, {
          name: '香烟',
          num: '5',
          money: '966'
        }, {
          name: '香烟',
          num: '5',
          money: '966'
        }]
      };
    },
    created() {
      this.initGetMoney();
      this.initWorkRecord();
    },
    mounted: function () {

    },
    methods: {
      resetQuery(){
        this.resetForm("queryForm");
        this.form.date=undefined;
        this.initWorkRecord();
      },
      /** 收支明细按钮 */

      /** 上班按钮操作 */
      MyGoWork(initMoney) {
        setInitMOney(initMoney).then(response => {
          //关闭弹框
          this.goWorkTanKuang = false;
          this.setInitMOney = response.data;
        }).then(() => {
          // this.msgSuccess(this.setInitMOney);
          this.msgSuccess("上班成功");
        }).catch(function() {});
      },
      /** 下班按钮操作 */
      MyXiaBanWork(deliverMoney,remainingMoney) {
        goXiaBan(deliverMoney,remainingMoney).then(response => {
          //关闭弹框
          this.goXiaBanTanKuang = false;
          this.xiabanInfo = response.data;
        }).then(() => {
          this.msgSuccess("下班成功");
        }).catch(function() {});
      },
      /** 查询金额 */
      initGetMoney() {
        getMoneyInfo().then(response => {
          this.integralList = response.data;
          // this.total = response.total;
          // this.loading = false;
        })
      },
      /** 查询交班记录 */
      initWorkRecord() {
        if(this.form.date){
          this.queryParams.startTime=this.form.date[0]
          this.queryParams.endTime=this.form.date[1]
        }
        getWorkRecord(this.queryParams).then(response => {
          this.getWorkRecordData = response.rows;
          this.total = response.total;
          this.loading = false;
        })
      },
      change(index) {

        if (this.idx === index || index === undefined) {
          return false;
        } else {
          this.idx = index;
        }
      },
      confirm() {
        this.handoverVisible = false
        this.$message({
          message: '交班成功',
          type: 'success'
        })

      }
    }
  };
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .tab {
    background-color: #fff;
    padding: 10px 20px;

    li {
      display: inline-block;
      width: 105px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #9C9186;
      font-size: 16px;
      cursor: pointer;

      &.on {
        background-color: #CAAB62;
        color: #fff;
        border-radius: 2px;
      }
    }
  }

  .title {
    font-size: 20px;
    color: #CAAB62;

  }

  .date {
    text-align: right;
    margin-bottom: 20px;
  }

  .jine {
    color: #CAAB62;

    font-size: 14px;

    p {
      color: #201D1B;
      margin-top: 5px;
    }

    span {
      font-size: 28px;
    }
  }

  .txtright.btn {
    text-align: right;
    margin-top: 20px;

  }

  .list {
    font-size: 14px;
    color: #292929;
    line-height: 30px;

    .colory {
      color: #9C9186;
    }
  }

  .txtcenter {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .money {
    color: #CAAB62;
  }

  .bgf {
    background-color: #fff;
    padding: 20px 30px;
    margin-top: 20px;

    .tongji {
      align-items: center;

      .item {
        display: flex;
        align-items: center;

        li {
          color: #9C9186;
          font-size: 14px;
          margin-left: 15px;
          line-height: 25px;

          span {
            color: #CAAB62;
            font-size: 20px;
          }
        }
      }

    }

    .txtright {
      text-align: right;

      button {
        margin-left: 20px;
      }
    }

    .paginations {
      text-align: center;
      margin-top: 20px;
    }

    .tables {
      margin-top: 20px;

      .shouzhi {
        border: 1px solid #CAAB62;
        color: #CAAB62;

        &:visited,
        &:hover,
        &:active {
          background-color: #CAAB62;
          color: #fff;
        }
      }

      .chuku {
        border: 1px solid #1085FF;
        color: #1085FF;

        &:visited,
        &:hover,
        &:active {
          background-color: #1085FF;
          color: #fff;
        }
      }
    }

    .time {
      color: #9C9186;
      align-items: center;
      margin-top: 20px;

      span {
        color: #292929;

        &.mar50 {
          margin-right: 50px;
        }
      }

      button {
        width: 285px;
      }
    }
  }
</style>
